<template>
  <div>
    <div class="user_top">
      <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
    </div>
    <router-link to="#">
      <div class="user">
        <span class="user_guli">账号管理</span>
        <span class="my_set_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <router-link to="/safety">
      <div class="user">
        <span class="user_guli">账号与安全</span>
        <span class="my_set_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <router-link to="#">
      <div class="user">
        <span class="user_guli">隐私设置</span>
        <span class="my_set_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <router-link to="#">
      <div class="user">
        <span class="user_guli">通用设置</span>
        <span class="my_set_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <router-link to="#">
      <div class="user">
        <span class="user_guli">清除缓存</span>
        <span class="my_set_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <router-link to="#">
      <div class="user">
        <span class="user_guli">推送通知</span>
        <span class="my_set_icon">
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <router-link to="#">
      <div class="user">
        <span class="user_guli">当前版本</span>
        <span class="my_set_icon">
          <span>V1.1.0</span>
          <i class="iconfont icon-fangxiangzuo"></i>
        </span>
      </div>
    </router-link>
    <van-button round type="info" class="user_chang" @click="logout"
      >退出登录</van-button
    >
  </div>
</template>

<script>
import { mapState } from "vuex";
import { MessageBox } from "element-ui";
import { Toast } from "vant";
export default {
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    logout() {
      MessageBox.confirm("确认退出吗?").then(
        () => {
          localStorage.removeItem("token");
          localStorage.removeItem("IdCard");
          localStorage.removeItem("Idname");
          localStorage.removeItem("username");
          localStorage.removeItem("userimg");
          localStorage.removeItem("code");
          localStorage.removeItem("age");
          localStorage.removeItem("sex");
          localStorage.removeItem("blood");
          localStorage.removeItem("name");
          localStorage.removeItem("introduction");
          localStorage.removeItem("type");
          Toast("登出完成");
          this.$router.replace("/login");
        },
        () => {}
      );
    },
    onClickLeft() {
      this.$router.replace("/profile");
    },
    back() {
      this.$router.replace("/profile");
    },
  },
};
</script>

<style lang="stylus">
.user_top{
  width 100%
  height 50px
  line-height 50px
}
.user{
  height 55px
  line-height 55px
  margin-top 5px
  font-size 18px
  background-color #fff
  .my_set_icon{
    float right
    margin-right 5px
    >.icon-fangxiangzuo{
      font-size 22px
    }
  }
}
.user_chang{
  width 100%
  height 40px
  margin-top 10px
  line-height 40px
  font-size 20px
  text-align center
  color black
  background-color #1989fa
}
.user_guli{
    margin-left 5px
  }
    >.icon-fangxiangzuo{
      font-size 22px
    }
  .el-message-box {
  width: 260px;
}
.nav_back{
  margin-right :90px;
}
.van-nav-bar {
  background-color: #409eff !important;
}
</style>
